<template>
    <div class="hero-update-container">
        <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="贴图">
                <ossUpload
                        :imageUrl="detailData.avatarSrc"
                        dirName="Activity"
                        :imgName="randomName"
                        @upload-img="handler"></ossUpload>
            </el-form-item>
            <el-form-item label="类别">
                <el-select v-model="detailData.type" placeholder="请选择类别">
                    <el-option
                            v-for="item in types"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="detailData.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="经验值">
                <el-input v-model="detailData.exp" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="detailData.role" placeholder="请选择类别">
                    <el-option
                            v-for="item in sortRole"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="要求">
                <el-input   type="textarea"
                            :rows="3"
                            v-model="unlock"
                            placeholder="多项用中文逗号分隔"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="danger" @click="update" :loading="loading">确定</el-button>
    </div>
</template>

<script>
    import ossUpload from '@/components/ossUpload.vue';
    import md5 from 'md5-js'
    export default {
        name: "AchUpdate",
        data(){
            return {
                detailData : {
                    avatarSrc : "",
                    type : "FORGEACH",
                    unlock : [],
                },
                unlock : "",
                types : [
                    {
                        value: 'FORGEACH',
                        label: '熔炉成就'
                    }
                ],
                sortRole : ["全角色","威尔森","薇洛","沃尔夫冈","温蒂","机器人（WX-78）","薇克伯顿","伍迪","韦斯","麦斯威尔","薇格弗德","韦伯","薇诺娜"],
            }
        },
        components: {
            ossUpload
        },
        watch:{
            unlock(newValue){
                this.detailData.unlock = newValue.split("，");
            }
        },
        created(){
            let id = this.$route.query.id;
            if(id){
                this.getDetailData(id);
            }
        },
        computed: {
            randomName() {
                let time = new Date();
                return md5(time);
            }
        },
        methods: {
            handler(avatarSrc) {
                this.detailData.avatarSrc = avatarSrc;
            },
            /**
             * 获取详情
             * @param id
             */
            getDetailData(id) {
                this.axios.get('/activity/single',{
                    params : {
                        id
                    }
                })
                    .then(res=>{
                        this.detailData = res.data;
                        this.unlock = this.detailData.unlock.join("，");
                    })
            },
            /**
             * 修改
             */
            update(){
                let addOrUpdate = this.$route.query.id ? "update" : "add";
                this.axios.post(`/activity/ach/${addOrUpdate}`,this.detailData)
                    .then(res=>{
                        if(res.data.code !== 0){
                            this.$message.error(res.data.message);
                        }else{
                            this.$router.push('/AchList');
                        }
                    })
            }
        }
    }
</script>

<style lang="scss">
    .hero-update-container{
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 16px;
            width: 50%;
        }
        .el-input__inner{
            width: 221px;
        }
        .composition-sty .el-input__inner{
            width: 160px;
        }
        .editor-sty {
            z-index: 1;
            height: 80vh;
        }
    }
</style>

<style lang="scss" scoped>
    .hero-update-container{
        padding: 16px;
    }
</style>